<template>
  <base-modal
    class="warranty-interest-dialog"
    :title="$t('component.warrantyInterestDialog.title1')"
    :show.sync="visible"
    width="600px"
  >
    <p>{{ isCreateOrEffect }}，{{ $t('component.warrantyInterestDialog.des') }}</p>
    <el-table
      :data="dataList"
      header-row-class-name="common-list-table-header__v2"
      class="common-list-table__v2"
      stripe
      border
    >
      <el-table-column prop="serialNumber" :label="$t('common.form.type.productNo')"></el-table-column>
      <el-table-column prop="name" :label="$t('component.warrantyInterestDialog.colum1')"></el-table-column>
      <el-table-column
        prop="updateText"
        :label="$t('component.warrantyInterestDialog.colum2')"
      ></el-table-column>
      <el-table-column
        prop="beforeValue"
        :label="$t('component.warrantyInterestDialog.colum3')"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="afterValue"
        :label="$t('component.warrantyInterestDialog.colum4')"
        show-overflow-tooltip
      ></el-table-column>
    </el-table>

    <div slot="footer">
      <el-button @click="handlerUpdate(false)">{{$t('common.base.cantUpdate')}}</el-button>
      <el-button type="primary" @click="handlerUpdate(true)">{{$t('common.base.update')}}</el-button>
    </div>
  </base-modal>
</template>
<script>
export default {
  name: 'warranty-interest-dialog',
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
    isCreateOrEffect: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    handlerUpdate(val) {
      this.$emit('handleUpdateQualityTime', val);
    },
  },
};
</script>
<style lang="scss" scoped>
.warranty-interest-dialog {
  ::v-deep .el-dialog__headerbtn {
    top: 0;
  }
  p {
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #262626;
  }
}
</style>